<template>
    <view class="purchaseDetailContainer">
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'增值服务'">
        </cunstom_navigation_bar>

		<view class="extra1Box" v-for="(item,index) in serviceList" >
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">{{item.name}}</view>
                    <view class="right" @tap="selected(item,index)">
                        <image v-if="!item.selected" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">{{item.subtotal}}元</view>
					<view class="right" v-if="item.name=='餐具1'">
					    <view class="numChange">
					        <view class="add" @tap="changeQuantity(-1,item,index)">-</view>
					        <view class="quantity">
					            {{item.quantity}}
					        </view>
					        <view class="subtraction" @tap="changeQuantity(1,item,index)">+</view>
					
					    </view>
					</view>
                </view>

            </view>
        </view>

		<!--
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">厨具</view>
                    <view class="right" @tap="selectUtensil=!selectUtensil">
                        <image v-if="!selectUtensil" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">20.00元</view>

                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">餐具</view>
                    <view class="right" @tap="selectTableware=!selectTableware">
                        <image v-if="!selectTableware" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">餐具费用：30元</view>
                    <view class="right">
                        <view class="numChange">

                            <view class="add" @tap="changeQuantity(-1)">-</view>

                            <view class="quantity">
                                {{quantity}}

                            </view>

                            <view class="subtraction" @tap="changeQuantity(1)">+</view>

                        </view>
                    </view>
                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">配料</view>
                    <view class="right" @tap="selectIngredient=!selectIngredient">
                        <image v-if="!selectIngredient" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">20.00元</view>

                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">菜品代买</view>
                    <view class="right" @tap="selectPurchase=!selectPurchase">
                        <image v-if="!selectPurchase" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">20.00元</view>

                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">特殊加工</view>
                    <view class="right" @tap="selectProcess=!selectProcess">
                        <image v-if="!selectProcess" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">120.00元</view>

                </view>

            </view>
        </view>
        <view class="extra1Box">
            <view class="extra1">
                <view class="eachLine">
                    <view class="left">是否需要清洁</view>
                    <view class="right" @tap="selectClean=!selectClean">
                        <image v-if="!selectClean" src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/no_select.png"></image>
                        <image v-else src="https://visionmpapi.jiuerjindi.com/upload/mp/valueAddService/selected.png"></image>
                    </view>
                </view>
                <view class="eachLine">
                    <view class="left">120.00元</view>

                </view>

            </view>
        </view>
		-->

        <view class="zhanwei"></view>
        <view class="fixBar">


            <view class="save" @click="save()">
                保存关闭
            </view>

        </view>



    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {

                quantity: 1,
                mallProductId: '',
                selectedOption: {},
                openId: "",
                selectUtensil: false, //厨具
                selectTableware: false, //餐具
                selectIngredient: false, //配料 
                selectPurchase: false, //菜品代买
                selectProcess: false, //特殊加工
                selectClean: false, //是否需要清洁 
                imgDomain: "", 
                propStyles: { 
                    iconSrc: "black",
                    // bgColor: '#FECF01', 
                },
				serviceList: [] // 服务列表
            };
        },
        computed: {

        },
        methods: {
            changeQuantity(num,item,index) {
                if ((item.quantity + num) >0) {
                    item.quantity += num
                    item.subtotal = item.quantity * item.price;
					item.index = index;
					this.$set(this.serviceList, index, item)
					
                }
            },
			getService(){
			  let services = uni.getStorageSync('services');	
				
			  let params = {page:1,limit:1000};
			  util.request(api.getService,params
				, 'GET', 'application/json').then(res => {
				  if (res.code == 200) {
					this.serviceList = res.data.data;
					this.serviceList.forEach(v=>{
						v.subtotal = v.price;
						v.quantity = 1;
						v.selected = false;
					})
					//
					services.forEach(v=>{
						this.$set(this.serviceList, v.index, v)
					})
				  } 
				}).catch((err) => {
				  console.log('err', err)
			  
				}); 
			},
			selected(item,index){
				item.selected = !item.selected;
				item.index = index;
				console.log("->item.selected:" + item.selected);
				this.$set(this.serviceList, index, item)
			},
            save(){
				let services = [];
				this.serviceList.forEach(v=>{
					if(v.selected){
						let obj = {};
						obj.id = v.id;
						obj.name = v.name;
						obj.service_type = v.service_type;
						obj.price = v.price;
						services.push(obj);
					}
				});
				uni.setStorageSync('services', services); // 存到缓存中
				uni.navigateBack ({
				    url: `/page_bookDetail/bookDetail`,
				})
			},
            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {
            selfFetchName(newVal, oldVal) {
                // 监听文本框值的改变
                if (newVal !== oldVal) {
                    // 执行需要在文本框值改变时执行的方法
                    console.log('文本框的值发生改变');
                    // 调用其他方法
                    this.pickUpTime = '';
                }
            }
        },


        onLoad: function (option) {

            //option为object类型，会序列化上个页面传递的参数
            // console.log('onload~~~购买页面', option);
            // this.mallProductId = option.mallProductId;
            // this.skuId = option.skuId
            // this.quantity = Number(option.quantity)
            // this.getOrderAddress(option.id)
            // this.startDate = this.getDate()


            this.imgDomain = process.env.VUE_APP_BASE_URL;
			this.getService();


        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }




    .extra1Box {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .extra1 {
        width: 690rpx;

        background: #FFFFFF;
        box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        padding: 0rpx 32rpx 0rpx 28rpx;
        margin-top: 20rpx;

        .eachLine {
            display: flex;
            justify-content: space-between;
            height: 90rpx;
            align-items: center;
            border-bottom: 1rpx solid #ccc;

            .left {
                font-weight: 500;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.8);
            }

            .right {
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);

                image {
                    width: 34rpx;
                    height: 34rpx;
                }

                .numChange {
                    display: flex;

                    .add,
                    .subtraction {
                        width: 49rpx;
                        height: 49rpx;
                        background: #F4F4F2;
                        border-radius: 7rpx;
                        color: #333;
                        text-align: center;
                        line-height: 49rpx;
                    }

                    .quantity {
                        background: #FECF01;
                        border-radius: 15rpx;
                        min-width: 49rpx;
                        height: 49rpx;
                        line-height: 49rpx;
                        text-align: center;
                        margin: 0rpx 10rpx;
                    }
                }
            }
        }
    }

    .zhanwei {
        width: 750rpx;
        height: 184rpx;
    }

    .fixBar {
        width: 750rpx;
        height: 184rpx;
        background: #FFFFFF;
        box-shadow: 0rpx -10rpx 40rpx 0rpx rgba(0, 0, 0, 0.07);
        border-radius: 68rpx 68rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;




        .save {
            width: 644rpx;
            height: 98rpx;
            background: #FECF01;
            box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            line-height: 98rpx;
            text-align: center;
        }



    }

    .selfFetchList {


        .box {
            background-color: #ffffff;

            height: 700rpx;
            overflow: auto;
        }

        .line1 {
            width: 100%;
            display: flex;
            justify-content: center;
            position: fixed;
            background-color: #ffffff;

            .title {
                align-content: center;
                display: flex;
                justify-content: center;

                height: 135rpx;
                align-items: center;
                font-weight: 600;
                font-size: 32rpx;
                color: #333333;

            }

            .closeIcon {
                width: 60rpx;
                height: 60rpx;
                position: absolute;
                top: 40rpx;
                right: 60rpx;
            }
        }

        .list {
            margin-top: 150rpx;

            .row {
                width: 100%;
                display: flex;
                justify-content: space-between;
                /* margin-bottom: 24rpx; */
                border-bottom: 1rpx solid #ccc;
                /* padding-bottom: 20rpx; */
                padding: 20rpx 20rpx;
                align-items: center;

                .name {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 5rpx;

                }

                .addr {
                    margin-bottom: 5rpx;
                }

                .addr,
                .phone {
                    font-size: 24rpx;
                    color: #333333;
                }

                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }

    }




    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }

    /deep/ .uni-popup .vue-ref {
        padding-bottom: 0px !important;
    }

    /deep/ .uni-date {
        /* height: 35px; */
    }

    /deep/ .uni-date-editor {
        /* width: 157rpx; */
        /* width: 200rpx;
      height: 60rpx; */
        font-size: 26rpx;

        .uni-icons {
            display: none;
        }

        .uni-date__x-input {
            text-align: center;
            /* color: #20B7B2; */
        }

        .uni-date-x {
            border-radius: 30rpx;
            background-color: transparent;
            /* border: 1rpx solid #20B7B2; */
        }

        .uni-date-x--border {
            border: none;
        }
    }

    /deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
        /* background-color: #20B7B2; */
    }

    /deep/ .uni-datetime-picker--btn {
        /* background-color: #20B7B2; */
    }
</style>